<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
      <swiper-slide v-for="item in List" :key="item.id">
        <img class="swiper-img" :src="item.picUrl" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<!--suppress JSAnnotator -->
<script>
  /* eslint-disable quotes */

  export default {
    name: 'HomeBanner',
    props: {
        List: Array
    },
    components: {},
    data () {
      return {
        swiperOption: {
          pagination: '.swiper-pagination',
          loop: 'false',
          autoplay: 5000
        }
      }
    },
    computed: {},
    methods: {
      showSwiper () {
        return this.List.length
      }
    },
    mounted () {
    },
    activated () {
    }
  }
</script>
<style scoped="scoped">
  .swiper-pagination{
      bottom: 30px;
  }
  img{
    width: 100%;
  }
</style>
